<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="~{fragment/head :: head}"></div>
<body class="stretch-layout sticky-navigation">

<!-- begin::main -->
<div id="main">

    <!-- begin::preloader-->
    <div th:replace="~{fragment/preload :: preload}"></div>
    <!-- end::preloader -->

    <!-- begin::navigation -->
    <div th:replace="~{fragment/navigation :: navigation(${status})}"></div>
    <!-- end::navigation -->
    <div class="main">
        <!-- begin::header -->
        <div th:replace="~{fragment/header :: header}"></div>
        <!-- end::header -->
        <!-- begin::main-content -->
        <div class="main-content">
            <div class="row app-block" th:fragment="index(status)" th:if="${status} == 6">

                <div class="col-md-3 app-sidebar">
                    <div class="card">
                        <div class="card-body">
                            <button class="btn btn-primary btn-block" data-toggle="modal" data-target="#worker-compose">
                                <i data-feather="plus" class="mr-2"></i>
                                添加工单
                            </button>
                        </div>
                        <div class="app-sidebar-menu" th:with="total=${page.getTotal}">
                            <div class="list-group list-group-flush">
                                <a th:href="@{/orderManager/(order=null)}"
                                   th:class="${activeUri eq 'null'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <i data-feather="folder" class="mr-2 width-15 height-15"></i>
                                    全部工单
                                    <span class="small ml-auto" th:text="${activeUri eq 'null'?(total):''}"></span>
                                </a>
                                <a th:href="@{/orderManager/myWillSolved}"
                                   th:class="${activeUri=='myWillSolved'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <i data-feather="edit" class="mr-2 width-15 height-15"></i>
                                    待我处理的
                                    <span class="small ml-auto" th:text="${activeUri=='myWillSolved'?(total):''}"></span>
                                </a>
                                <a th:href="@{/orderManager/myProcessed}"
                                   th:class="${activeUri=='myProcessed'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <i data-feather="info" class="mr-2 width-15 height-15"></i>
                                    我处理的
                                    <span class="small ml-auto" th:text="${activeUri=='myProcessed'?(total):''}"></span>
                                </a>
                                <a th:href="@{/orderManager/mySolved}"
                                   th:class="${activeUri=='mySolved'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <i data-feather="check-circle" class="mr-2 width-15 height-15"></i>
                                    我解决的
                                    <span class="small ml-auto" th:text="${activeUri=='mySolved'?(total):''}"></span>
                                </a>
                            </div>
                            <div class="card-body">
                                <h6 class="mb-0">Labels</h6>
                            </div>
                            <div class="list-group list-group-flush">


                                <a th:href="@{/orderManager/(order='紧急')}"
                                   th:class="${activeUri=='紧急'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <span class="text-danger fa fa-circle mr-2"></span>
                                    紧急
                                    <span class="small ml-auto" th:text="${activeUri=='紧急'?(total):''}"></span>
                                </a>
                                <a th:href="@{/orderManager/(order='高')}"
                                   th:class="${activeUri=='高'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <span class="text-warning fa fa-circle mr-2"></span>
                                    高
                                    <span class="small ml-auto" th:text="${activeUri=='高'?(total):''}"></span>
                                </a>
                                <a th:href="@{/orderManager/(order='中')}"
                                   th:class="${activeUri=='中'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <span class="text-info fa fa-circle mr-2"></span>
                                    中
                                    <span class="small ml-auto" th:text="${activeUri=='中'?(total):''}"></span>
                                </a>
                                <a th:href="@{/orderManager/(order='低')}"
                                   th:class="${activeUri=='低'?'list-group-item active d-flex align-items-center':'list-group-item d-flex align-items-center'}">
                                    <span class="text-success fa fa-circle mr-2"></span>
                                    低
                                    <span class="small ml-auto" th:text="${activeUri=='低'?(total):''}"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 app-content">
                    <div class="app-content-overlay"></div>
                    <div class="app-action">
                        <div class="action-left">
                            <div class="custom-control custom-checkbox mr-3">
                                <input type="checkbox" class="custom-control-input" id="customCheckAll">
                                <label class="custom-control-label" for="customCheckAll"></label>
                            </div>
                            <ul class="list-inline">
                                <li class="list-inline-item mb-0">
                                    <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                        批量处理
                                    </a>
                                    <div class="dropdown-menu">
                                        <a id="outputworkorder" class="dropdown-item">导出工单</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="mulDel" style="color: red" class="dropdown-item ">删除</a>
                                    </div>
                                </li>
                                <li class="list-inline-item mb-0">
                                    <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                        优先级
                                    </a>
                                    <div class="dropdown-menu">
                                        <a id="starjj" class="dropdown-item priority">标记为紧急</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="stargyxj" class="dropdown-item priority">标记为高优先级</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="starzyxj" class="dropdown-item priority">标记为中优先级</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="stardyxj" class="dropdown-item priority">标记为低优先级</a>
                                    </div>
                                </li>
                                <li class="list-inline-item mb-0">
                                    <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                        状态
                                    </a>
                                    <div class="dropdown-menu">
                                        <a id="starywc" class="dropdown-item">标记为已解决</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="starwfp" class="dropdown-item">标记为未分配</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="starclz" class="dropdown-item">标记为处理中</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="stardcl" class="dropdown-item">标记为待处理</a>
                                        <div class="dropdown-divider"></div>
                                        <a id="starygb" class="dropdown-item">标记为已关闭</a>
                                    </div>
                                </li>
                                <li class="list-inline-item mb-0">
                                    <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                        Order by
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" th:href="@{/orderManager(order='createtime')}">创建时间</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" th:href="@{/orderManager(order='updatetime')}">更新时间</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" th:href="@{/orderManager(order='未分配')}">未分配</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="action-right">
                            <!--                        action="/orderManager/search"-->
                            <form class="d-flex mr-3" action="/orderManager/search">
                                <a href="#" class="app-sidebar-menu-button btn btn-outline-light">
                                    <i data-feather="menu" class="width-15 height-15"></i>
                                </a>
                                <div class="input-group">
                                    <input name="title" type="text" class="form-control" placeholder=" 搜 索 "
                                           aria-describedby="button-addon1">
                                    <div class="input-group-append">

                                        <button id="sousuo" class="btn btn-outline-light" type="submit">
                                            <i class="ti-search"></i>
                                        </button>
                                        <!--                                    id="button-addon1"-->
                                    </div>
                                </div>
                            </form>
                            <div class="app-pager d-flex align-items-center">
                                <div class="mr-3">[[${page.getCurrent}]]/[[${page.getPages}]] [[${page.total}]]</div>
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link"
                                               th:href="@{/orderManager(pn=${page.getCurrent}-1,order=${session.orders})}"
                                               aria-label="Previous">
                                                <i data-feather="chevron-left" class="width-15 height-15"></i>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link"
                                               th:href="@{/orderManager(pn=((${page.getCurrent} >= ${page.getPages}) ? ${page.getPages}:${page.getCurrent}+1),order=${session.orders})}"
                                               aria-label="Next">
                                                <i data-feather="chevron-right" class="width-15 height-15"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <div class="card card-body app-content-body">
                        <div class="app-lists innerbox" tabindex="4" style="overflow-y: auto; outline: none">
                            <ul class="list-group list-group-flush">

                                <li th:each="workorder, rowInfo:${list}" th:value="${workorder.id}" class="list-group-item">
                                    <div>
                                        <div class="custom-control custom-checkbox mr-2">
                                            <input type="checkbox" class="custom-control-input" th:id="${workorder.id}"
                                                   th:value="${workorder.id}" name="checkos">
                                            <label class="custom-control-label" th:for="${workorder.id}"></label>
                                        </div>
                                    </div>
                                    <div>
                                        <figure class="avatar avatar-sm mr-3">
                                            <img src="assets/media/image/photo1.jpg" class="rounded-circle"
                                                 alt="image">
                                        </figure>
                                    </div>
                                    <div class="flex-grow-1 min-width-0">
                                        <div class="mb-1 d-flex justify-content-between align-items-center">
                                            <div class="text-truncate app-list-title">[[${workorder.title}]]</div>

                                            <!--                                        <div class="text-truncate app-list-title" >[[${workorder.state}]]</div>-->
                                            <div class="pl-3 d-flex">
                                                <span class="text-nowrap text-muted">最后一次更新：</span>
                                                <span class="text-nowrap text-muted"
                                                      th:text="${#dates.format(workorder.updatetime, 'yyyy-MM-dd HH:mm')}">[]</span>

                                                <div class="dropdown ml-3">
                                                    <a href="#" class="btn btn-outline-light btn-sm" data-toggle="dropdown">
                                                        <i class="fa fa-ellipsis-v"></i>

                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a class="dropdown-item text-danger"
                                                           th:href="@{/orderManager/del(workid=${workorder.id})}">删除</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-muted d-flex justify-content-between">
                                            <div class="text-truncate small">[[${workorder.orderdesc}]]</div>
                                            <div style="position: absolute;left: 500px" th:switch="${workorder.state}">
                                                <div>
                                                    <div th:case="已解决" style="color:green;border: 1px solid; margin:auto;"
                                                         class="text-truncate app-list-title">[[${workorder.state}]]
                                                    </div>
                                                    <div th:case="未分配" style="color:red;border: 1px solid ; margin:auto"
                                                         class="text-truncate app-list-title">[[${workorder.state}]]
                                                    </div>
                                                    <div th:case="未处理" style="color:#868649;border: 1px solid ; margin:auto"
                                                         class="text-truncate app-list-title">[[${workorder.state}]]
                                                    </div>
                                                    <div th:case="待处理" style="color:#868649;border: 1px solid ; margin:auto"
                                                         class="text-truncate app-list-title">[[${workorder.state}]]
                                                    </div>
                                                    <div th:case="处理中" style="color:blue;border: 1px solid ; margin:auto"
                                                         class="text-truncate app-list-title">[[${workorder.state}]]
                                                    </div>
                                                    <div th:case="已关闭" style="color:gray;border: 1px solid ; margin:auto"
                                                         class="text-truncate app-list-title">[[${workorder.state}]]
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="text-nowrap pl-3">
                                                <ul class="list-inline">
                                                    <!--                                                ${workoder.state}-->
                                                    <li class="list-inline-item mb-0" th:switch="${workorder.priority}">
                                                        <i th:case="紧急" class="fa fa-circle text-danger"></i>
                                                        <i th:case="高" class="fa fa-circle text-warning"></i>
                                                        <i th:case="中" class="fa fa-circle text-info"></i>
                                                        <i th:case="低" class="fa fa-circle text-success"></i>

                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <span class="text-nowrap text-muted">创建时间：</span>
                                        <span class="text-nowrap text-muted"
                                              th:text="${#dates.format(workorder.createtime, 'yyyy-MM-dd HH:mm')}">[]</span>


                                    </div>
                                </li>

                            </ul>


                            <!-- begin::Create Event Modal  弹窗组件----->
                            <div class="modal fade" id="createEventModal" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">修改工单信息</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <i class="ti-close"></i>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <form class="needs-validation" th:action="@{/orderManager/update}" method="post"
                                                  novalidate>
                                                <input type="hidden" id="upid" name="id">
                                                <div class="form-row">
                                                    <div class="col-md-4 mb-3">
                                                        <label for="validationCustom01">分类</label>
                                                        <input name="worktype" type="text" class="form-control"
                                                               id="validationCustom01" placeholder="worktype" required>
                                                        <div class="valid-feedback">
                                                            Looks good!
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label for="validationCustom02">标题</label>
                                                        <input name="title" type="text" class="form-control"
                                                               id="validationCustom02" placeholder="title" required>
                                                        <div class="valid-feedback">
                                                            Looks good!
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label for="validationCustom03">描述</label>
                                                        <input name="orderdesc" type="text" class="form-control"
                                                               id="validationCustom03" placeholder="orderdesc" required>
                                                        <div class="valid-feedback">
                                                            Looks good!
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-row">
                                                    <!--                                                <div class="col-md-6 mb-3">-->
                                                    <!--                                                    <label for="validationCustom04">附件</label>-->
                                                    <!--                                                    <input name="attachments" type="text" class="form-control" id="validationCustom04" placeholder="空" required value="空">-->
                                                    <!--                                                    <div class="invalid-feedback">-->
                                                    <!--                                                        请提供一个附件-->
                                                    <!--                                                    </div>-->
                                                    <!--                                                </div>-->
                                                    <div class="col-md-3 mb-3">
                                                        <label for="validationCustom05">创建人</label>
                                                        <input name="cclist" type="text" class="form-control"
                                                               id="validationCustom05" placeholder="空" required>
                                                        <div class="invalid-feedback">
                                                            Please provide a valid cclist.
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 mb-3">
                                                        <label>优先级</label>
                                                        <select class="form-control" id="priority" name="priority">
                                                            <option>低</option>
                                                            <option>中</option>
                                                            <option>高</option>
                                                            <option>紧急</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-row">
                                                    <div class="col-md-6 mb-3">
                                                        <div class="form-group">
                                                            <label>状态</label>
                                                            <select class="form-control" id="state" name="state">
                                                                <option>未分配</option>
                                                                <option>待处理</option>
                                                                <option>处理中</option>
                                                                <option>已解决</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 mb-3">
                                                        <label for="validationCustom06">客服组号</label>
                                                        <input name="customerservicegroupid" type="text"
                                                               class="form-control" id="validationCustom06"
                                                               placeholder="例：1" required>
                                                        <div class="invalid-feedback">
                                                            Please provide a valid customerservicegroupid.
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 mb-3">
                                                        <label for="validationCustom07">客服编号</label>
                                                        <input name="customerserviceid" type="text" class="form-control"
                                                               id="validationCustom07" placeholder="例：1" required >
                                                        <div class="invalid-feedback">
                                                            Please provide a valid customerserviceid.
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="col-md-6 mb-3">
                                                            <label for="validationCustom08">顾客编号</label>
                                                            <input name="customerid" type="text" class="form-control"
                                                                   id="validationCustom08" placeholder="例：1" required>
                                                            <div class="invalid-feedback">
                                                                Please provide a valid customerid.
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label for="validationCustom09">渠道</label>
                                                            <input name="channel" type="text" class="form-control"
                                                                   id="validationCustom09" placeholder="channel" required>
                                                            <div class="invalid-feedback">
                                                                Please provide a valid channel.
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="col-md-6 mb-3">
                                                            <label for="validationCustom10">上次更新时间</label>
                                                            <input name="updatetime" type="text" class="form-control"
                                                                   id="validationCustom10" required>
                                                            <div class="invalid-feedback">
                                                                Please provide a valid updatetime.
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label for="validationCustom11">创建时间</label>
                                                            <input name="createtime" type="text" class="form-control"
                                                                   id="validationCustom11" required>
                                                            <div class="invalid-feedback">
                                                                Please provide a valid zip.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="form-check">

                                                        <div class="invalid-feedback">
                                                            You must agree before submitting.
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary" type="submit">修改</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end::Create Event Modal -->

                        </div>
                        <!-- end::app-lists -->
                        <!-- begin:app-detail -->
                        <div class="card app-detail">
                            <div class="card-header">

                                <div class="app-detail-action-left">
                                    <a class="app-detail-close-button" href="#">
                                        <i data-feather="arrow-left" class="mr-3"></i>
                                    </a>
                                    <h5 id="detail01" class="mb-0">
                                        工单详情
                                        <span class="badge bg-success badge-pill ml-1">在线</span>
                                    </h5>
                                </div>
                                <div class="app-detail-action-right">
                                    <div>

                                        <!--  start：弹窗修改工单信息  button-->
                                        <div class="row">
                                            <div>
                                                <button class="btn btn-primary btn-block" data-toggle="modal"
                                                        data-target="#createEventModal"
                                                        style="background-color:  white; color: black;border-color: gainsboro">
                                                    <i data-feather="plus" class="mr-2"></i>
                                                    修改工单信息
                                                </button>
                                            </div>
                                            <a id="dedetele" href="#" class="btn btn-outline-light ml-2"
                                               data-toggle="tooltip"
                                               title="Dispose">
                                                <i data-feather="trash"></i>
                                            </a>

                                        </div>
                                        <!--  end；弹窗修改工单信息  button-->


                                    </div>
                                </div>
                            </div>
                            <div class="app-detail-article">

                                <div class="card-body">

                                    <div class="d-flex align-items-center p-l-r-0 m-b-20">
                                        <div class="d-flex align-items-center">
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/photo1.jpg"
                                                     class="rounded-circle"
                                                     alt="image">
                                            </figure>
                                            <div>
                                                <h6 class="m-b-0">
                                                        <span style="font-size: larger" id="detitle"
                                                              class="text-primary">Valentine Maton</span>
                                                    <span style="font-size: smaller" id="deworkType"
                                                          class="d-sm-inline d-none text-muted"> &lt;elnora@gmail.com&gt;</span>
                                                </h6>
                                                <span id="deorderDesc"
                                                      class="small text-muted">to Lois Jimenez</span>
                                                <span class="small text-muted">&nbsp</span>
                                                <span class="small text-muted">&nbsp</span>
                                                <span class="small text-muted">&nbsp</span>
                                                <span id="decreatetime"
                                                      class="small text-muted">to Lois Jimenez</span>
                                            </div>
                                        </div>
                                        <div class="ml-auto">
                                            <a href="#" data-toggle="tooltip" title="Attachment" class="mr-2">
                                                <i class="fa fa-paperclip"></i>
                                            </a>
                                            <a href="#" class="mr-2">
                                                <i class="fa fa-star font-size-16 text-warning"></i>
                                            </a>
                                            <span class="text-muted">4:14 AM</span>
                                        </div>
                                    </div>
                                    <div class="dropdown-divider"></div>


                                    <!--                                        回复信息-->
                                    <div class="messages" tabindex="4" style="overflow-y: hidden; outline: none;">
                                        <div class="message-item me">
                                            <div class="message-item-content">&nbsp</div>
                                            <span class="time small text-muted font-italic">&nbsp</span>
                                        </div>
                                        <div class="message-item me" style="float: right">
                                            <div style="background-color: #004deb;
                                                color: rgba(255,255,255,.9);
                                                max-width: 120%;
                                                padding: 8px 8px;
                                                line-height: 1.5rem;
                                                border-radius: 8px;
                                                position: relative;
                                                 margin-left: auto;
                                                 padding-left: 10px;
                                                 padding-right: 10px;" id="wreplycontent" class="message-item-content">
                                                回复内容
                                            </div>
                                            <span id="wreplytime"
                                                  class="time small text-muted font-italic">时间</span>
                                        </div>
                                        <div class="message-item me">
                                            <div class="message-item-content">&nbsp</div>
                                            <span class="time small text-muted font-italic">&nbsp</span>
                                        </div>
                                        <div class="message-item me">
                                            <div class="message-item-content">&nbsp</div>
                                            <span class="time small text-muted font-italic">&nbsp</span>
                                        </div>
                                        <div class="message-item me">
                                            <div class="message-item-content">&nbsp</div>
                                            <span class="time small text-muted font-italic">&nbsp</span>
                                        </div>
                                        <div class="message-item me">
                                            <div class="message-item-content">&nbsp</div>
                                            <span class="time small text-muted font-italic">&nbsp</span>
                                        </div>

                                        <div class="message-item me">
                                            <div class="message-item-content">&nbsp</div>
                                            <span class="time small text-muted font-italic">&nbsp</span>
                                        </div>
                                    </div>


                                </div>
                                <hr class="m-0">
                                <div class="card-body">
                                    <h6 class="mb-3 font-size-11 text-uppercase">Attached Files</h6>
                                    <ul class="list-unstyled mb-0">
                                        <li class="small">
                                            <a href="#">
                                                <i data-feather="paperclip" class="mr-1 width-15 height-15"></i>
                                                uikit-design.psd
                                            </a>
                                        </li>
                                        <li class="small">
                                            <a href="#">
                                                <i data-feather="paperclip" class="mr-1 width-15 height-15"></i>
                                                uikit-design.sketch
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <hr class="m-0">
                                <div class="card-body">
                                    <h6 class="mb-3 font-size-11 text-uppercase">Reply</h6>
                                    <div class="reply-email-quill-editor mb-3"></div>
                                    <div class="d-flex justify-content-between">
                                        <div class="reply-email-quill-toolbar">
                                        <span class="ql-formats mr-0">
                                          <button class="ql-bold"></button>
                                          <button class="ql-italic"></button>
                                          <button class="ql-underline"></button>
                                          <button class="ql-link"></button>
                                          <button class="ql-image"></button>
                                        </span>
                                        </div>
                                        <button class="btn btn-primary">
                                            <i data-feather="send" class="mr-2"></i>
                                            Send
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        </div>
        <!-- end::main-content -->
        <!-- begin::footer -->
        <div th:replace="~{fragment/footer :: footer}"></div>
        <!-- end::footer -->
    </div>

</div>
<!-- end::main -->
<!-- Plugin scripts -->
<script src="vendors/bundle.js"></script>

<!-- Chart js -->
<script src="vendors/charts/chartjs/chart.min.js"></script>

<!-- Apex chart -->
<script src="vendors/charts/apex/apexcharts.min.js"></script>

<!-- Circle progress -->
<script src="vendors/circle-progress/circle-progress.min.js"></script>

<!-- Peity -->
<script src="vendors/charts/peity/jquery.peity.min.js"></script>
<script src="assets/js/examples/charts/peity.js"></script>

<!-- Datepicker -->
<script src="vendors/datepicker/daterangepicker.js"></script>

<!-- Slick -->
<script src="vendors/slick/slick.min.js"></script>

<!-- Vamp -->
<script src="vendors/vmap/jquery.vmap.min.js"></script>
<script src="vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="assets/js/examples/vmap.js"></script>

<!-- jQuery -->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>

<!-- DataTable -->
<script src="vendors/dataTable/jquery.dataTables.min.js"></script>
<script src="vendors/dataTable/dataTables.bootstrap4.min.js"></script>
<script src="vendors/dataTable/dataTables.responsive.min.js"></script>
<script src="assets/js/examples/datatable.js"></script>


<!--工单的script---begin -->
<!-- Tagsinput -->
<script src="vendors/tagsinput/bootstrap-tagsinput.js"></script>
<script src="assets/js/examples/tagsinput.js"></script>
<!-- quill -->
<script src="vendors/quill/quill.js"></script>
<script>
    var browser = jutils.getBrowserInfo()
</script>
<!--//日期格式化-->
<script>
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>
<script>
    function getserachFrom(){
        var title01=serachform.title.value();
        console.log("这是搜索按钮-----"+title);
        location.href="/orderManager/search?title="+title01;
    }
</script>
<script th:inline="javascript">


    var count = 0; //记录添加的复选框的个数
    var result="";
    var isSelectAll = false; //是否全选
    var list =[[${list}]];
    var replylist=[[${wreply}]]
    console.log(list);
    new Quill('.compose-quill-editor', {
        modules: {
            toolbar: ".compose-quill-toolbar"
        },
        placeholder: "描述... ",
        theme: "snow"
    });

    new Quill('.reply-email-quill-editor', {
        modules: {
            toolbar: ".reply-email-quill-toolbar"
        },
        placeholder: "回复... ",
        theme: "snow"
    });


    $(function () {
        $(document).on('click', '.app-block .app-content .app-action .action-left input[type="checkbox"]', function () {


            // 全选键
            $('.app-lists ul li input[type="checkbox"]').prop('checked', $(this).prop('checked'));
            // 打勾
            if ($(this).prop('checked'))
            {

                $('.app-lists ul li input[type="checkbox"]').closest('li').addClass('active');
                isSelectAll = true;
                var cks=document.getElementsByName("checkos");
                for(var i=0;i<cks.length;i++){
                    cks[i].checked=flag;}

            } else {
                $('.app-lists ul li input[type="checkbox"]').closest('li').removeClass('active');
                isSelectAll = false;
                // var cks=document.getElementsByName("checkos");
                // for(var i=0;i<cks.length;i++){
                //     cks[i].checked=flag;}
            }
        });

        $(document).on('click', '.app-lists ul li input[type="checkbox"]', function () {
            if ($(this).prop('checked')) {
                $(this).closest('li').addClass('active');
                result += $(this).val()+",";
                count++;
                console.log(count+"   "+result);
            } else {

                $(this).closest('li').removeClass('active');
                var res1=$(this).val()+",";
                result=result.replaceAll(res1,"");
                count--;
                console.log(count+"   "+result);
            }
        });

        $(document).on('click', '.app-block .app-content .app-content-body .app-lists ul.list-group li.list-group-item', function (e) {
            if (!$(e.target).is('.custom-control, .custom-control *, a, a *')) {
                var ids=$(this).val();
                console.log("当前的index为"+"   "+$(this).index());
                console.log(list[$(this).index()]);

                // $('#detail01').text(list[$(this).index()].id)//ok


                $('#detitle').text(list[$(this).index()].title)//ok
                $('#deworkType').text(list[$(this).index()].worktype)
                $('#deorderDesc').text(list[$(this).index()].orderdesc)

                //详情的删除按钮
                $('#dedetele').val(list[$(this).index()].id)

                //回复面板详情
                $('#wreplycontent').text(replylist[$(this).index()].content)
                $('#wreplytime').text(new Date(replylist[$(this).index()].replytime).format("yyyy-MM-dd hh:mm"))

                //修改信息详情
                $('#validationCustom01').val(list[$(this).index()].worktype)
                $('#validationCustom02').val(list[$(this).index()].title)
                $('#validationCustom03').val(list[$(this).index()].orderdesc)

                $('#validationCustom05').val(list[$(this).index()].cclist)
                $('#validationCustom06').val(list[$(this).index()].customerservicegroupid)
                $('#validationCustom07').val(list[$(this).index()].customerserviceid)
                $('#validationCustom08').val(list[$(this).index()].customerid)
                $('#validationCustom09').val(list[$(this).index()].channel)

                // var oldTime=(new Date(list[$(this).index()].updatetime)).getTime()
                // var curTime = new Date(oldTime-8*60*60*1000).format("yyyy-MM-dd hh:mm")
                $('#validationCustom10').val(new Date(list[$(this).index()].updatetime))

                // var oldTime=(new Date(list[$(this).index()].createtime)).getTime()
                // var curTime = new Date(oldTime-8*60*60*1000).format("yyyy-MM-dd hh:mm")
                $('#validationCustom11').val(new Date(list[$(this).index()].updatetime))
                $('#upid').val(list[$(this).index()].id)

                $("option:contains('"+list[$(this).index()].priority+"')").attr("selected",true)
                $("option:contains('"+list[$(this).index()].state+"')").attr("selected",true)

                $('#decreatetime').text("    "+new Date(list[$(this).index()].createtime).format("yyyy-MM-dd hh:mm"))
                $('.app-detail').addClass('show').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                    $('.app-block .app-content .app-content-body .app-detail .app-detail-article').niceScroll().resize();
                });
            }
        });



        $('#sousuo').click(function() {

            var workid=$('#title').val();
            console.log("这是搜索值-----"+workid);
            // location.href="/orderManager/del?workid="+workid;

        })

        $(document).on('click', 'a.app-detail-close-button', function () {
            $('.app-detail').removeClass('show');
            return false;
        });

        $(document).on('click', '.app-sidebar-menu-button', function () {
            $('.app-block .app-sidebar, .app-content-overlay').addClass('show');
            // $('.app-block .app-sidebar .app-sidebar-menu').niceScroll().resize();
            return false;
        });

        $(document).on('click', '.app-content-overlay', function () {
            $('.app-block .app-sidebar, .app-content-overlay').removeClass('show');
            return false;
        });
        $('#mulDel').click(function () {
            if(!confirm("确定要删除这些图书吗？")){
                return ;
            }
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/muldel?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/muldel?list="+str;
            }

            // //去掉字符串末尾的‘&’
            // str=str.substring(0, str.length-1);


            // location.href="/orderManager/muldel?list="+result
        })


        // 紧急优先级
        $('#starjj').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/starjinji?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/starjinji?list="+str;
            }
        })
        // 高优先级
        $('#stargyxj').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/stargyxj?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/stargyxj?list="+str;
            }
        })

        //中优先级
        $('#starzyxj').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/starzyxj?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/starzyxj?list="+str;
            }
        })
        //设置低优先级绑定
        $('#stardyxj').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/stardyxj?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/stardyxj?list="+str;
            }
        })
        //设置为已完成
        $('#starywc').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/starywc?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/stardywc?list="+str;
            }
        })

        //设置为未分配
        $('#starwfp').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/starwfp?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/starwfp?list="+str;
            }
        })

        //设置为处理中
        $('#starclz').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/starclz?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/starclz?list="+str;
            }
        })


        //设置为待处理
        $('#stardcl').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/stardcl?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/stardcl?list="+str;
            }
        })

        //设置为已关闭
        $('#starygb').click(function () {
            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/starygb?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/starygb?list="+str;
            }
        })
        //下载事件绑定
        $('#outputworkorder').click(function () {

            if(isSelectAll=true){
                var cks=document.getElementsByName("checkos");
                var str="";
                //拼接所有的图书id
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        str+=cks[i].value+",";
                        console.log(str);
                        location.href="/orderManager/voutputworkorder?list="+str;
                    }
                }
            }
            else{
                console.log(str);
                location.href="/orderManager/voutputworkorder?list="+str;
            }
        })
        // 下载
        $('#outputworkorder').click(function () {
            toastr.options = {
                timeOut: 3000,
                progressBar: true,
                showMethod: "slideDown",
                hideMethod: "slideUp",
                showDuration: 200,
                hideDuration: 200
            };
            toastr.success('下载成功');
        })
    });
</script>
<!--工单的script---end -->

<!--访问者-->
<script src="assets/js/examples/sweet-alert.js"></script>


<!-- Prism -->
<script src="vendors/prism/prism.js"></script>
<!-- Dashboard scripts -->
<script src="assets/js/examples/dashboard.js"></script>
<div class="colors"> <!-- To use theme colors with Javascript -->
    <div class="bg-primary"></div>
    <div class="bg-primary-bright"></div>
    <div class="bg-secondary"></div>
    <div class="bg-secondary-bright"></div>
    <div class="bg-info"></div>
    <div class="bg-info-bright"></div>
    <div class="bg-success"></div>
    <div class="bg-success-bright"></div>
    <div class="bg-danger"></div>
    <div class="bg-danger-bright"></div>
    <div class="bg-warning"></div>
    <div class="bg-warning-bright"></div>
</div>

<!-- App scripts -->
<script src="assets/js/app.min.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        // 点击设置后，保证不关闭弹出框
        $(function () {
            let status = [[${status}]];
            if (status == 8||status == 9||status == 10||status == 11||status == 12){
                $('#drag').addClass("open");
            }
        })

        // 关闭notice按钮事件
        $('#closeNoticeBtn').click(function () {
            $('#notice').removeClass("show");
        })
        // 关闭notice按钮事件
        $('#closeSysMsgBtn').click(function () {
            $('#sysMsg').removeClass("show");
        })

    })
</script>

<!-- begin::lightbox -->
<script src="vendors/lightbox/jquery.magnific-popup.min.js"></script>
<script src="assets/js/examples/lightbox.js"></script>
</body>
</html>